import { PageContainer, ProTable } from "@ant-design/pro-components";
import { Button, Modal, Input, Form, Row, Col, Space, InputNumber } from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
// import AddModal from "./AddModal";
import { getUrlParam } from "@/utils/utils";
import SetWagesModal from "./SetWagesModal";
import SetTypeModal from "./SetTypeModal";

const Page = (props) => {
  const {
    dispatch,
    submitLoading,
    allStaff,
    startTime,
    endTime,
    userId,
    data,
    venueId,
    venueArr,
  } = props;
  const [form] = Form.useForm();
  const typeRef = useRef(null);
  const wagesRef = useRef(null);
  const actionRef = useRef();
  const [venueName, setVenueName] = useState("");
  const [row, setRow] = useState({});

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
      params: {
        userId: getUrlParam("id"),
        venueId: getUrlParam("venueId"),
        grantCycle: decodeURIComponent(getUrlParam("grantCycle")),
      },
      callback: () => {
        actionRef.current?.reload();
        let venues = venueArr.filter((v) => v.id == venueId);
        if (venues.length) {
          setVenueName(venues[0].venueName);
        }
      },
    });
  }, []);

  const queryAllStaff = (record) => {
    setRow(record);
    let { id, userNickName } = record;
    wagesRef.current?.form.resetFields();
    wagesRef.current?.form.setFieldsValue({ id, userNickName });
    wagesRef.current?.setOpen(true);
  };
  const editInfo = (params) => {
    dispatch({
      type: `${namespace}/queryItemInfo`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
      },
    });
  };

  const toggleState = () => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      return (
        <Space>
          <Button
            type="link"
            onClick={() => {
              setRow(record);
              typeRef.current.setTitleType(1);
              typeRef.current.form.setFieldsValue(record);
              typeRef.current.setOpen(true);
            }}
          >
            编辑
          </Button>
          <Button
            type="link"
            onClick={() => {
              queryAllStaff(record);
            }}
          >
            编辑员工信息
          </Button>
        </Space>
      );
    },
  };

  const submitItem = async (params) => {
    // console.log(params,)
    dispatch({
      type: `${namespace}/submitItem`,
      params: {
        ...params,
        userId,
        userNickName: data.userNickName,
        tel: data.tel,
        // id:row.id
      },
      callback: () => {
        actionRef.current?.reload();
        typeRef.current.setOpen(false);
      },
    });
  };

  const updateNewStaff = async (params) => {
    dispatch({
      type: `${namespace}/updateNewStaff`,
      params,
      callback: () => {
        actionRef.current?.reload();
      },
    });
  };

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        title={() => [
          <Row gutter={32}>
            <Col>
              <h3>员工:{data.userNickName}</h3>
            </Col>
            <Col>
              <h3>手机号码:{data.tel}</h3>
            </Col>
            <Col>
              <h3>计算周期:{data.occurDate}</h3>
            </Col>
            <Col>
              <h3>总销售额:¥{data.totalSaleAmount}</h3>
            </Col>
          </Row>,
        ]}
        scroll={{ x: 1500 }}
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              setRow({ venueName, userNickName: data.userNickName });
              typeRef.current.setTitleType(0);
              typeRef.current.form.resetFields();
              typeRef.current.setOpen(true);
            }}
          >
            新建销售记录
          </Button>,
        ]}
        search={false}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params: {
              ...params,
              userId,
              startTime,
              endTime,
            },
          });
        }}
        pagination={{
          showSizeChanger: true,
          pageSize: 1000,
        }}
        columns={calcColumns({ operate })}
      />
      <SetTypeModal
        ref={typeRef}
        dispatch={dispatch}
        userNickName={data.userNickName}
        submitItem={submitItem}
        venueName={venueName}
      />
      <SetWagesModal
        ref={wagesRef}
        dispatch={dispatch}
        allStaff={allStaff}
        userNickName={data.userNickName}
        updateNewStaff={updateNewStaff}
      />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
